@charset "utf-8";

.mj-alert {
	position: relative;
    padding: 6px 48px 6px 16px;
    border-radius: 4px;
    color: #515a6e;
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 10px;
    display: flex;
    align-items:center;
}

.mj-alert-icon i {
	vertical-align: middle;
}

.mj-alert-info {
    border: 1px solid #abdcff;
    background-color: #f0faff;
}

.mj-alert-info .mj-alert-icon i {
	color:#5f626c;
}

.mj-alert-success {
    border: 1px solid #8ce6b0;
    background-color: #edfff3;
}

.mj-alert-success .mj-alert-icon i {
	color:var(--success);
}

.mj-alert-warning {
    border: 1px solid #ffd77a;
    background-color: #fff9e6;
}

.mj-alert-warning .mj-alert-icon i {
	color:var(--warning);
}

.mj-alert-error {
    border: 1px solid #ffb08f;
    background-color: #ffefe6;
}

.mj-alert-error .mj-alert-icon i {
	color:var(--error);
}

.mj-alert-title {
	font-size: 16px;
	margin-bottom: 6px;
}

.mj-alert-desc {
	line-height: 1.5;
}

.mj-alert-icon {
	margin-right: 10px;
}

.mj-alert-with-desc {
	padding: 14px 48px 14px 16px;
}

.mj-alert-with-desc .mj-alert-icon {
	margin-right: 15px;
}

.mj-alert-with-desc .mj-alert-icon i {
	font-size: 28px;
}

.mj-alert-close {
	position: absolute;
	top:10px;
	right:8px;
	display: inline-block;
    cursor: pointer;
    color: #999;
    font-size: 12px;
}

/*animation*/
.fade-enter-active, .fade-leave-active {
    transition: opacity .3s
}
.fade-enter, .fade-leave-to {
    opacity: 0
}